<template>
    <div class="breadCrumb">
        <!-- <el-breadcrumb separator="/"  style="float:left;width:300px;">
            <el-breadcrumb-item >{{$route.meta.title}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{$route.name}}</el-breadcrumb-item>
        </el-breadcrumb> -->
        <div >
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                 <el-breadcrumb separator="/"  style="float:left;width:300px;height:60px;line-height:60px;">
                    <el-breadcrumb-item >{{$route.meta.title}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{$route.name}}</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- <el-menu-item >{{$route.meta.title}}</el-menu-item>
                <el-menu-item  v-if="$route.meta.title !='首页'">{{$route.name}}</el-menu-item> -->
                <el-submenu index="2" style="float:right">
                  <template slot="title">{{userName}}</template>
                  <el-menu-item index="2-1"  @click="editName" v-if="isSubAccount != 1">修改密码</el-menu-item>
                  <el-menu-item index="2-2" @click="returnOver">退出登录</el-menu-item>
                 
                </el-submenu>
               
              </el-menu>
        </div>
        <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
                <el-form :model="form" :rules="rules" ref="form">
                  <el-form-item label="旧密码" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off" type="password" placeholder="请输入你的旧密码" style="width:300px;"></el-input>
                  </el-form-item>
                  <el-form-item label="新密码" :label-width="formLabelWidth" prop="region">
                        <el-input v-model="form.region" autocomplete="off" type="password" placeholder="请输入你的新密码" style="width:300px;"></el-input>
                   </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="cancel">取 消</el-button>
                  <el-button type="primary" @click="submit('form')">确 定</el-button>
                </div>
         </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "breadcrumb",
        data(){
            return{
                activeIndex:'2',
                dialogFormVisible:false,
                isSubAccount:JSON.parse(localStorage.getItem("userInfo")).isSubAccount,
                userId:JSON.parse(localStorage.getItem("userInfo")).userId,
                userName:JSON.parse(localStorage.getItem("userInfo")).userName,
                form:{
                    name: '',
                    region: '',
                },
                formLabelWidth:'80px',
                rules:{
                    name: [
                        { required: true, message: '请输入旧密码', trigger: 'blur' },
                        { min: 6, max: 16, message: '长度在6-16位', trigger: 'blur' }
                    ],
                    region:[
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { min: 6, max: 16, message: '长度在6-16位', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            editName(){
                this.dialogFormVisible = true;
                this.form.name = '';
                this.form.region = ''
            },
            async updateLoginPass(){
                  let { data } = await this.$post({
                      api: '/login/updateLoginPass',
                      data:{
                        userId:this.userId,
                        oldPass:this.form.name,
                        newPass:this.form.region,
                        userName:this.userName
                      }
            
                    });
                    if (data.code === 0) {
                        this.dialogFormVisible = false;
                        this.$message.success('修改成功'); 
                        // this.$router.push('/login')
                        setTimeout(()=>{
                            localStorage.clear();
                            this.$router.push('/login')
                        },1000)
                    //   console.log(data)
                    } else {
                      this.$message({
                        type: 'error',
                        message: data.msg
                      })
                  }
            },
            submit(formName){
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
                    if(reg.test(this.form.region)){
                        this.updateLoginPass();
                    }else{
                        this.$message.error('密码必须是数字和英文组合'); 
                    }
                    
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            cancel(){
                this.dialogFormVisible = false;
            },
            returnOver(){
                localStorage.clear();
                this.$router.push('/login')
            }
        },
        mounted () {
            
            console.log(this.$route.fullPath)
        }
    };
</script>

<style lang="scss">
    .breadCrumb {
        margin-bottom: 30px;
        height:80px;
        /* margin-top:20px; */
    }
</style>